<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="format-detection" content="telephone=no;email=no">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/swiper.min.css">
		<link rel="stylesheet" href="../../css/iconfont.css">
		<link rel="stylesheet" href="../../css/style.css">
		<title>图片新闻详情</title>
		<style>
			html,
			body {
				background-color: #000;
			}
			
			.mui-bar-nav {
				box-shadow: none;
			}
			
			.imgs-content {
				margin-top: 85px;
				margin-bottom: 51px;
			}
			
			.banner {
				width: 100%;
			}
			
			.banner img {
				display: block;
				max-width: 100%;
			}
			
			.photo-content {
				position: fixed;
				left: 0;
				bottom: 51px;
				z-index: 99;
				width: 100%;
				height: 150px;
				overflow: auto;
				-webkit-overflow-scrolling: touch;
				padding: 0 16px;
				background-color: rgba(0, 0, 0, .5);
			}
			
			.photo-content .photo-number {
				margin-right: 32px;
				color: #fff;
				font-size: 18px;
			}
			
			.photo-content .photo-text {
				text-align: justify !important;
				line-height: 1.4;
				word-wrap: break-word !important;
				color: #fff !important;
				font-size: 18px !important;
			}
			
			.detailbar--images {
				box-shadow: none;
				border-top: 1px solid #292929;
				background-color: #000;
			}
			
			.mui-badge {
				padding: 0 6px;
				border-radius: 6px;
			}
			
			.settings .mui-table-view.more-setting {
				background-color: #fff;
			}
			
			.settings .mui-table-view.more-setting .mui-table-view-cell {
				border: none;
			}
			
			.settings .mui-table-view.more-setting .mui-media .mui-icon {
				padding: 5px;
				font-size: 2em;
				border: 1px solid #ddd;
				border-radius: 50%;
			}
			
			.mui-table-view.more-setting {
				width: auto;
			}
			
			.mui-popover.mui-popover-action .mui-table-view .mui-table-view-cell:after {
				background-color: transparent;
			}
			
			.mui-popover .mui-table-view {
				background-color: #fff;
			}
			
			.more-share {
				width: 46px;
				height: 46px;
			}
			
			.more-share .iconfont {
				font-size: 26px;
			}
			
			.mui-bar-tab .mui-tab-item.mui-active {
				color: #929292;
			}
			
			.mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn){
				overflow: visible;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
				overflow: visible;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav navbar-black">
			<a class="mui-action-back mui-icon iconfont mui-pull-left c-white">&#xe603;</a>
			<a href="#settings" class="mui-icon iconfont mui-pull-right c-white">&#xe602;</a>
		</header>
		<article class="imgs-content" id="imgsContent">
			
		</article>

		<nav class="mui-bar mui-bar-tab detailbar--images" id="detailsBar">
			<a class="mui-tab-item" id="commentsNum" href="javascript:;">
				<span class="mui-icon iconfont">&#xe607;</span>
			</a>
			<a class="mui-tab-item" id="collectNum" href="javascript:;">
				<span class="mui-icon iconfont">&#xe609;</span>
			</a>
			<a class="mui-tab-item" id="praiseNum" href="javascript:;">
				<span class="mui-icon iconfont">&#xe61f;</span>
			</a>
			<a href="#settings" class="mui-tab-item" id="shares">
				<span class="mui-icon iconfont">&#xe608;</span>
			</a>
		</nav>

		<!-- 更多操作 -->
		<div id="settings" class="settings mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view mui-grid-view mui-grid-9 more-setting">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon iconfont">&#xe617;</span>
						<div class="mui-media-body">收藏</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon iconfont">&#xe60d;</span>
						<div class="mui-media-body">正文字号</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon more-share"><span class="iconfont">&#xe622;</span></span>
						<div class="mui-media-body">微信朋友圈</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon iconfont">&#xe60e;</span>
						<div class="mui-media-body">微信好友</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon iconfont">&#xe610;</span>
						<div class="mui-media-body">QQ好友</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon iconfont">&#xe611;</span>
						<div class="mui-media-body">新浪微博</div>
					</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#settings"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<input id="imageDetail" type="hidden" value="1">

		<script src="../../js/mui.min.js"></script>
		<script src="../../libs/zepto.min.js"></script>
		<script src="../../js/swiper.min.js"></script>
		<!--<script src="../../js/mui.zoom.js"></script>-->
		<script src="../../js/template.js"></script>
		<script src="../../js/common.js"></script>
		<!-- 图片文章模板 -->
		<script id="imgsArt" type="text/html">
			<section>
				<div id="banner" class="swiper-container swiper-container-horizontal banner">
					<div class="swiper-wrapper">
						{{each obj.imgs as item i}}
						<div class="swiper-slide">
							<a href="javascript:;">
								<img class="mui-zoom" src="{{item}}" onerror="this.src='../../images/lauch/def/tj_def.png'">
								<!--<div class="mui-zoom-wrapper">
									<div class="mui-zoom-scroller">
										
									</div>
								</div>-->
							</a>
						</div>
						{{/each}}
					</div>
				</div>
			</section>
			<section id="artTitle">
				<div class="photo-content">
					<div class="mui-pull-left photo-number">
						<span class="current-num" id="currentNum">1</span>/<span class="sum-num">{{obj.imgs.length}}</span>
					</div>
					<p class="photo-text" id="photoText">{{obj.docs[0]}}</p>
				</div>
			</section>
		</script>
		<script>
			var newsId = null;
			var uuid = null;
			var praiseNum = null,
				title = null,
				abstractInfor = null;
			var shares = {};
			var questionsDetail = null;
			var carouselImage = null;//首图
			mui.init({
				gestureConfig: {
					pinch: true,
					doubletap: true
				},
				beforeback: function() {
					var modeFlag = localStorage.getItem("modeFlag");
					if (modeFlag) {
						plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
						plus.navigator.setStatusBarBackground("#000");
					} else {
						var ws = plus.webview.currentWebview().opener();
						if (ws.id == "special-topic_sub.html") {
							plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
							plus.navigator.setStatusBarBackground("#159ceb");
						} else if (ws.id == "yx_sub.html") {
							plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
							plus.navigator.setStatusBarBackground("#0173d8");
						} else {
							plus.navigator.setStatusBarStyle("UIStatusBarStyleDefault");
							plus.navigator.setStatusBarBackground("#fefefe");
						}
					}
					return true;
				},
				swipeBack: true //启用右滑关闭功能
			});
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var id = self.newsId;
				uuid = plus.device.uuid; //获取设备的唯一标识
				//根据id向服务器请求图片新闻详情
				getDetails(id);
				plus.share.getServices(function(s) {
					if (s && s.length > 0) {
						for (var i = 0; i < s.length; i++) {
							var t = s[i];
							shares[t.id] = t;
						}
					}
				}, function() {
					console.log("获取分享服务列表失败");
				});
				plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
				plus.navigator.setStatusBarBackground("#000");
			});

			function getDetails(id) {
				plus.nativeUI.showWaiting("", {width: "50px", height: "50px", background: "#000", style: "white"});
				mui.ajax({
					url: baseUrl + '/news/detailTJ?id=' + id + '&devicesId=' + uuid,
					dataType: 'json',
					type: 'get',
					success: function(data) {
						if (data.returnFlag == 0) {
							var arr = [];
							mui.each(data.obj.docs, function(index, value){
								arr.push(value);
							});
							newsId = data.obj.id;
							praiseNum = data.obj.praiseNum;
							title = data.obj.title;
							abstractInfor = data.obj.abstractInfor;
							//首图
							carouselImage = data.obj.carouselImage;
							var artHtml = template('imgsArt', data);
							if (data.obj.commentsNum != 0) {
								$("#commentsNum").find(".mui-icon").append('<span class="mui-badge">' + data.obj.commentsNum + '</span>');
							} else {
								$("#commentsNum").find(".mui-icon").html('&#xe607;');
							}
							if (data.myOp.collectOp != 0) {
								$("#collectNum").addClass("c-blue").find(".iconfont").html("&#xe61c;");
							}
							if (data.myOp.praiseOp != 0) {
								$("#praiseNum").addClass("c-blue").find(".iconfont").html("&#xe61e;");
								$("#praiseNum").find(".iconfont").append('<span class="mui-badge">' + data.obj.praiseNum + '</span>');
							}
							if (data.obj.praiseNum != 0) {
								$("#praiseNum").find(".mui-icon").append('<span class="mui-badge">' + data.obj.praiseNum + '</span>');
							} else {
								$("#praiseNum").find(".mui-icon").html('&#xe61f;');
							}
							$("#imgsContent").html(artHtml);
							var mySwiper = new Swiper('#banner', {
								onSlideChangeEnd: function(swiper) {
									$("#currentNum").html(mySwiper.activeIndex + 1);
									$("#photoText").html(arr[mySwiper.activeIndex]);
								}
							});	
//							mui('.mui-zoom-wrapper').zoom();
							plus.nativeUI.closeWaiting();
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理
						throwGetNewsError();
					}
				});
			}
			//评论
			document.getElementById("commentsNum").addEventListener('tap', function() {
				//打开评论页面          
				mui.openWindow({
					url: 'comments.html',
					id: 'comments.html',
					waiting: {
						autoShow: false
					},
					extras: {
						newsId: newsId
					}
				});
			});
			//点赞
			document.getElementById("praiseNum").addEventListener('tap', function(e) {
				var $this = $(this);
				//根据id向服务器请求
				mui.ajax({
					url: baseUrl + '/news/createPraise?devicesId=' + uuid + '&newsId=' + newsId,
					dataType: 'json',
					type: 'get',
					success: function(data) {
						if (data.returnFlag == 0) {
							if (data.returnFlagCode == "P001") {
								praiseNum++;
								$this.addClass("c-blue").find(".iconfont").html("&#xe61e;");
								$this.find(".iconfont").append('<span class="mui-badge">' + praiseNum + '</span>');
							} else {
								praiseNum--;
								if (praiseNum <= 0) {
									$this.removeClass("c-blue").find(".mui-icon").html('&#xe61f;');
								} else {
									$this.removeClass("c-blue").find(".iconfont").html("&#xe61f;");
									$this.find(".iconfont").append('<span class="mui-badge">' + praiseNum + '</span>');
								}
							}
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理
						throwGetNewsError();
					}
				});
			});
			//收藏
			document.getElementById("collectNum").addEventListener('tap', function(e) {
				var $this = $(this);
				if (isLogin()) {
					//根据id向服务器请求
					mui.ajax({
						url: baseUrl + '/news/createCollect?devicesId=' + uuid + '&newsId=' + newsId,
						dataType: 'json',
						type: 'get',
						success: function(data) {
							if (data.returnFlag == 0) {
								if (data.returnFlagCode == "P001") {
									$this.addClass("c-blue").find(".iconfont").html("&#xe61c;");
									mui.toast("收藏成功");
								} else {
									$this.removeClass("c-blue").find(".iconfont").html("&#xe609;");
									mui.toast("取消收藏");
								}
							}
						},
						error: function(xhr, type, errorThrown) {
							//异常处理 
							throwGetNewsError();
						}
					});
				} else {
					mui.openWindow({
						url: '../my_center/login.html',
						id: 'login.html',
						waiting: {
							autoShow: false
						}
					});
				}
			});
			$("#imgsContent")[0].addEventListener("tap", function() {
				$("#artTitle").toggle();
			});
			mui("#settings .more-setting").on('tap', "li", function() {
				var i = $(this).index();
				switch (i) {
					case 0:
						var btn = document.getElementById("collectNum");
						mui.trigger(btn, "tap");
						break;
					case 1:
						//正文字号
						showFontSize();
						break;
					case 2:
						//更多分享
						shareMsg(3);
						break;
					case 3:
						shareMsg(1);
						break;
					case 4:
						shareMsg(0);
						break;
					case 5:
						shareMsg(2);
						break;
				}
				mui('#settings').popover("hide");
			});
			// 原生系统选择字体大小
			function showFontSize() {
				plus.nativeUI.actionSheet({
					title: "请选择字号",
					cancel: "取消",
					buttons: [{
						title: "小"
					}, {
						title: "中"
					}, {
						title: "大"
					}]
				}, function(e) {
					if (e.index == 1) {
						plus.storage.setItem("fontFlag", "1");
					}
					if (e.index == 2) {
						plus.storage.setItem("fontFlag", "2");
					}
					if (e.index == 3) {
						plus.storage.setItem("fontFlag", "3");
					}
				});
			}

			function shareMsg(i) {
				var ids = [{
					id: "qq"
				}, {
					id: "weixin",
					ex: "WXSceneSession"
				}, {
					id: "sinaweibo"
				},{
					id: "weixin",
					ex: "WXSceneTimeline"
				}];
				var s_id = ids[i].id;
				var share = shares[s_id];
				if (share) {
					if (share.authenticated) {
						shareMessage(share, ids[i].ex);
					} else {
						share.authorize(function() {
							shareMessage(share, ids[i].ex);
						}, function(e) {
							console.log("认证授权失败：" + e.code + " - " + e.message);
						});
					}
				} else {
					mui.toast("无法获取分享服务，请检查manifest.json中分享插件参数配置，并重新打包");
				}
			}

			function shareMessage(share, ex) {
				var msg = {
					extra: {
						scene: ex
					}
				};
				msg.href = shareUrl + newsId;
				msg.title = title;
				msg.content = title;
				if(mui.os.ios){
					if (~share.id.indexOf('weibo')) {
						msg.content += "；" + shareUrl + newsId;
					}
				}
				if(carouselImage=="")
				{
					carouselImage="_www/images/logo.png";
				}
				
				msg.thumbs = [carouselImage];
				share.send(msg, function() {
					//发送收藏数据
					mui.ajax({
						url: baseUrl + '/news/createForward?devicesId=' + uuid + '&newsId=' + newsId,
						dataType: 'json',
						type: 'get',
						success: function(data) {
							if (data.returnFlag == 0) {}
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							throwGetNewsError();
						}
					});
					mui.toast("分享到\"" + share.description + "\"成功！ ");
					console.log("分享到\"" + share.description + "\"成功！ ");
				}, function(e) {
					console.log("分享到\"" + share.description + "\"失败: " + e.code + " - " + e.message);
				});
			}
		</script>
	</body>

</html>
